<template>
  <div class="box">
    <el-page-header @back="goBack" content="设备详情" />
    <el-divider/>
    <!-- 头部信息 -->
    <el-form :inline="true" label-width="80px">
      <el-form-item label="设备编码:">
        {{ data.assetSn }}
      </el-form-item>
      <el-form-item label="设备名称:">
        {{ data.assetName }}
      </el-form-item>
      <el-form-item label="设备位置">
        {{ data.location }}
      </el-form-item>
      <el-form-item label="设备品牌">
        {{ data.assetBrand }}
      </el-form-item>
      <el-form-item label="设备型号">
        {{ data.assetModel }}
      </el-form-item>
      <el-form-item label="状态:">
        <el-tag type="success" v-if="data.deviceStatus == 0">运行中</el-tag>
        <el-tag type="danger" v-if="data.deviceStatus == 1">故障</el-tag>
        <el-tag type="warning" v-if="data.deviceStatus == 2">禁用</el-tag>
      </el-form-item>
    </el-form>
    <el-tabs v-model="state.activeName">
      <el-tab-pane label="绑定配件" name="config">
        <bind-devices v-if="state.activeName === 'config'"/>
      </el-tab-pane>
      <el-tab-pane label="预约记录" name="log">
        <device-log v-if="state.activeName === 'log'" ref="childLogRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import BindDevices from './modules/bindDevices.vue'
import DeviceLog from './modules/log.vue'
import { getDevice } from '@/api/bms/device/index'
const router = useRouter()
const route = useRoute()
const { id } = route.params

const goBack = () => {
  router.back()
}
const data = ref({})

const state = reactive({
  activeName: 'config',
})

// 调用getFittingDevicesDetail api函数，获取虚拟设备详情，数据赋值给ref data
getDevice(id).then((res) => {
  data.value = res
})

const childLogRef = ref<any>();

</script>

<style lang="scss" scoped>
.box {
  margin: 15px;
  padding: 15px;
  background: #fff;
}
</style>
